

<!-- 我的发票 -->
<template>
	<view>
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="我的发票" colorTheme="black">
				<view slot="rightBtns" @click="invoiceManager_fun()" class="invoiceManager">
					发票管理
				</view>
			</navHeader>
		</view>
		
		<view class="body">	

			<!-- 发票列表 -->
			<view class="invoice-lists" v-if="orderInvoiceList && orderInvoiceList.length">
				<view class="invoice-item" v-for="(item, index) in orderInvoiceList" :key="index">
					<view class="invoice-info">
						<view class="invoice-top">
						
							<!-- 发票抬头 -->
							<view class="ciTitle ellipsis1">{{item.invoiceDto.ciTitle}}</view>
						
							<!-- 开票状态 -->
							<view class="status" :class="{doing: item.cidStatus == 1}">
								{{item.cidStatus | invoiceStatusFormat}}
							</view>
						</view>
						
						<!-- 发票信息 -->
						<view class="invoice-amount">
							<view>开票金额<text>￥{{item.cidAmount / 100}}</text></view>
						</view>
						<view class="invoice-type">
							<view>{{item.cidType | cidTypeFormate}}</view>
							<view @click="gotoInvoiceDetailPage(index)" class="invoiceDetail borderOneRpx">
								发票详情
							</view>
						</view>
					</view>
					
					<!-- 操作按钮 -->
					<view class="invoice-btns-groups borderOneRpx">

						<!-- 订单详情 -->
						<view @click="gotoOrderDetailPage(item.cidOrderId)" v-if="item.cidFrom == 10" class="order-detail">
							<view>
								订单详情
							</view>
							<image :src="icon.orderBtn" class="order-icon"></image>
						</view>
						<view v-else class="order-detail">
							<view v-if="item.cidFrom == 20">
								水券充值
							</view>
							<view v-if="item.cidFrom == 30">
								购买礼品卡
							</view>
						</view>
						
						<!-- 申请/开票时间 -->
						<view class="applyDealTime">
							{{(item.cidOverTime || item.cidApplyTime) | formatDate}}
						</view>
					</view>
				</view>
			</view>
			<g-empty v-else></g-empty>
		</view>
		
		<!-- 发票管理 -->
		<view v-if="invoiceManagerFlag" class="modalBg-Container">
			<view class="modalContent-Container">
				<view class="modalTitle">
					发票管理
				</view>
				<scroll-view scroll-y="true" class="scrollViewInvoice-Container">
					<view class="oneInvoice" v-for="(item, index) in invoiceList" :key="item.cfId">
						<view class="left">
							<view class="ciTitle ellipsis1">
								{{item.ciTitle}}
							</view>
							<view v-if="item.ciType == 1" class="ciType">
								<image class="ciType1" :src="icon.ciType1"></image>
								<view class="typeName">
									公司
								</view>
							</view>
							<view v-if="item.ciType == 2" class="ciType">
								<image class="ciType2" :src="icon.ciType2"></image>
								<view class="typeName">
									个人或其他
								</view>
							</view>
						</view>
						<view @click="gotoEditInvoicePage(index)" class="right">
							<image class="editBtn" :src="icon.editBtn"></image>
						</view>
					</view>
				</scroll-view>
				<view class="addInvoiceBtn-Container">
					<view @click="gotoAddInvoicePage()" class="addInvoiceBtn">+ 新增发票抬头</view>
				</view>
				<image @click="closeInvoiceHandler()" class="closeBtn" :src="icon.closeBtn"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		filters: {
			
			//发票类型格式化
			cidTypeFormate: function(cidType) {
				var cidTypeName = "";
				switch(parseInt(cidType)) {
					case 1:
						cidTypeName = "普通纸质发票";
						break;
					case 2:
						cidTypeName = "普通电子发票";
						break;
					case 3:
						cidTypeName = "增值税纸质发票";
						break;
					case 4:
						cidTypeName = "增值税电子发票";
						break;
				}
				
				return cidTypeName;
			},
			
			
			// 时间格式化
			formatDate: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				
				return YY + MM + DD + ' ' + hh + mm + ss;
			},
			
			
			//发票状态格式化
			invoiceStatusFormat(status) {
				
				var statusName = "";
				switch(parseInt(status)) {
					case 1:
						statusName = "待开票";
						break;
					case 2:
						statusName = "已开票";
						break;
					case 3:
						statusName = "取消开票";
						break;
				}
				
				return statusName;
			}
		},
		computed: {
			...mapState(['imgSite', 'hasLogin'])
		},
		data() {
			return {
				icon: {
					closeBtn: "/static/images/user/invoice/close-btn.png",
					editBtn: "/static/images/user/invoice/edit-btn.png",
					ciType1: "/static/images/user/invoice/ciType1.png",
					ciType2: "/static/images/user/invoice/ciType2.png",
					unCheck: "/static/images/cart/weixuan@2x.png",
					checked: "/static/images/cart/gouxuan@2x.png",
					select: "/static/images/common/jin@2x.png",
					orderBtn: "/static/images/user/invoice/order-btn.png"
				},
				
				//发票管理
				invoiceManagerFlag: false,
				
				//分页相关
				pageSize: 10,
				pageNum: 1,
				msgDatas: {},
				invoiceList: [],
				orderInvoiceList: [],
			};
		},
		onShow: function() {
			this.getOrderInvoiceList();
			
			if(this.invoiceManagerFlag) {
				this.invoiceManager_fun();
			}
		},
		methods: {
			
			
			//订单发票列表
			getOrderInvoiceList() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/customerInvoiceDetailApi/getInvoiceDetailList',
					method: 'POST',
					data: {
						pageNum: that.pageNum,
						pageSize: that.pageSize
					},
					success: function(res) {
						that.orderInvoiceList = res.data.response.results;
					}
				});
			},
			
			
			//开票详情
			gotoInvoiceDetailPage(index) {
				var invoiceInfo = this.orderInvoiceList[index];
				uni.navigateTo({
					url: "/pagesUser/invoice/detail?invoiceInfo="+JSON.stringify(invoiceInfo)
				});
			},
			
			//订单详情
			gotoOrderDetailPage(orderId) {
				uni.navigateTo({
					url: "/pagesOrder/orderDetail?orderIds="+orderId
				});
			},

			
			//发票管理
			invoiceManager_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/customerInvoiceApi/getInvoiceList',
					method: 'POST',
					data: {
						pageNum: 1,
						pageSize: 10000
					},
					success: function(res) {
						that.invoiceList = res.data.response.results;
						that.invoiceManagerFlag = true;
					}
				});
			},
			closeInvoiceHandler() {
				this.invoiceManagerFlag = false;
			},
			
			//新增发票
			gotoAddInvoicePage() {
				uni.navigateTo({
					url: "/pagesUser/invoice/addEdit"
				});
			},
			
			//编辑发票
			gotoEditInvoicePage(index) {
				var invoice = this.invoiceList[index];
				uni.navigateTo({
					url: "/pagesUser/invoice/addEdit?editFlag=1&invoice="+JSON.stringify(invoice)
				});
			}
		}
	};
</script>
<style lang="less">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		
		.invoiceManager {
			margin-right: 30rpx;
			font-size: 26rpx;
			color: #333333;
		}
	}
	

	/*开票状态*/
	.nav {
		z-index: 8;
		position: fixed;
		height: 90rpx;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.nav .nav-item {
		flex: 1;
		text-align: center;
		line-height: 90rpx;
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		position: relative;
		justify-content: center;
	}

	.nav .nav-item-active view,
	.nav .nav-item text {
		color: #1b5;
	}

	.nav-item-active::after {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 50rpx;
		height: 4rpx;
		background: rgba(17, 187, 85, 1);
		border-radius: 2rpx;
		content: "";
		margin-left: -25rpx;
	}


	/*发票列表*/
	.invoice-lists {
		margin-top: 20rpx;
		padding: 0 30rpx;
		
		.invoice-item {
			position: relative;
			margin-bottom: 20rpx;
			height: 275rpx;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			
			.invoice-info {
				display: flex;
				flex-direction: column;
				padding: 30rpx 34rpx 0 34rpx;
				height: 204rpx;
				
				.invoice-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 60rpx;
					box-sizing: border-box;
					
					.ciTitle {
						font-size:29rpx;
						font-family:PingFang SC;
						// font-weight:bold;
						color:rgba(52,52,52,1);
					}
					
					.status {
						font-size:24rpx;
						color: #666666;
						
						&.doing {
							color: #FE5E49;
						}
					}
				}
				
				
				.invoice-amount {
					view {
						font-size:24rpx;
						color:#666666;
					}
					text {
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #343434;
					}
				}
				
				.invoice-type {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					font-size:24rpx;
					color:#666666;
				
					//发票详情
					.invoiceDetail {
						position: relative;
						width:120rpx;
						height:44rpx;
						line-height: 44rpx;
						text-align: center;
						font-size:22rpx;
						color: #666666;
						// font-weight:500;
						background:rgba(255,255,255,1);
						
						
						&.borderOneRpx::after {
							border-color: #9A9A9A;
							border-radius:22px;
						}
					}
				}		
			}
		}
	}

	//底部信息
	.invoice-btns-groups {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		padding: 0 30rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		
		&.borderOneRpx:after {
			border-color: #EEEEEE;
		}
		
		
		.order-detail {
			z-index: 999;
			display: flex;
			align-items: center;
			font-size:24rpx;
			font-family:PingFang SC;
			color: #999999;
			
			.order-icon {
				margin-left: 14rpx;
				width: 8rpx;
				height: 14rpx;
			}
		}
		
		.applyDealTime {
			font-size:24rpx;
			color: #999999;
		}
	}

	/* 发票管理 */
	.modalBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background:rgba(0,0,0,0.7);
		
		.modalContent-Container {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 900rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx 16rpx 0px 0px;
			
			.modalTitle {
				width: 100%;
				height: 130rpx;
				line-height: 130rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				color:rgba(52,52,52,1);
			}
			
			.scrollViewInvoice-Container {
				margin: 0 auto;
				width:690rpx;
				height:580rpx;
				
				.oneInvoice {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 auto;
					margin-bottom: 20rpx;
					padding: 0 32rpx 0 35rpx;
					width:690rpx;
					height:152rpx;
					background:rgba(255,255,255,1);
					border:1rpx solid rgba(238,238,238,1);
					box-shadow:0px 2rpx 10rpx 0px rgba(123,123,123,0.1);
					border-radius:16rpx;
					
					.left {
						display: flex;
						flex-direction: column;
						height: 100%;
						justify-content: space-between;
						padding: 30rpx 0;
						
						.ciTitle {
							max-width: 520rpx;
							font-size:28rpx;
							font-family:PingFang SC;
							// font-weight:bold;
							color:rgba(51,51,51,1);
						}
						
						.ciType {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							
							.ciType1 {
								width: 24rpx;
								height: 24rpx;
							}
							.ciType2 {
								width: 26rpx;
								height: 22rpx;
							}
							.typeName {
								margin-left: 8rpx;
								font-size:24rpx;
								font-family:PingFang SC;
								// font-weight:500;
								color:#666666;
							}
						}
					}
					
					.right {
						display: flex;
						align-items: center;
						justify-content: center;
						width:80rpx;
						height:80rpx;
						background:rgba(255,255,255,1);
						border:1rpx solid rgba(245,245,245,1);
						box-shadow:0px 0px 10rpx 0px rgba(53,53,53,0.05);
						border-radius:40rpx;
						
						.editBtn {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
			
			.addInvoiceBtn-Container {
				position: absolute;
				bottom: 100rpx;
				left: 0;
				width: 100%;
				height: 90rpx;
				
				.addInvoiceBtn {
					margin: 0 auto;
					width:600rpx;
					height:90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size:34rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:rgba(255,255,255,1);
					background: #FE5E49;
					border-radius:45rpx;
				}
			}
			
			.closeBtn {
				position: absolute;
				top: 26rpx;
				right: 26rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	
	
	.invoiceManager-Container {
		position: fixed;
		left: 72rpx;
		bottom: 232rpx;
		padding-top: 18rpx;
		box-sizing: border-box;
		width: 99rpx;
		height: 99rpx;
		text-align: center;
		font-size: 25rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(17, 187, 85, 1);
		line-height: 32rpx;
		background: rgba(178, 246, 205, 1);
		box-shadow: 0 2rpx 15rpx 0 rgba(0, 162, 64, 0.35);
		border-radius: 50%;
	}
</style>



